<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-02-22 13:34:58
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-02-22 16:40:29
 * @Description:科室二维码预览弹窗
-->
<template>
  <div>
    <qr-code id="tst" v-bind="$attrs" @print="onPrint" />
  </div>
</template>

<script>
import QrCode from '../component/qrcode.vue';
import Print from 'print-js';
export default {
  components: {
    QrCode,
  },
  methods: {
    onPrint() {
      const focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
      Print({
        documentTitle: '科室二维码',
        printable: 'tst',
        type: 'html',
        scanStyles: false,
        onPrintDialogClose: () => {
          clearInterval(focuser);
          this.$emit('done');
        },
        onError: () => {
          clearInterval(focuser);
          this.$emit('done');
        },
        style: `
      .pure {
         text-align: center;
      }
      .pure .card {
        width: 320px;
        height: 440px;
        background: #ffffff;
        border-radius: 15px;
        border: 1px solid #000000;
        margin-right: auto;
        margin-left: auto;
        margin-top: 40px;
        padding: 20px;
        box-sizing: border-box;
      }
      .pure .title {
        font-size: 36px;
        font-weight: 400;
        margin-bottom: 5px;
      }
      .pure .qr-code {
        width: 280px;
        height: 284px;
        border: 1px solid #000000;
        border-radius: 10px;
        margin-right: auto;
        margin-left: auto;
        padding: 40px 40px 0 40px;
        box-sizing: border-box;
      }
      .pure .qr-code img {
        width: 200px;
        height: 200px;
      }
      .pure .dept {
        font-size: 24px;
        margin-bottom: 26px;
      }
      .pure .dept2 {
        font-size: 24px;
      }

      `,
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
